<template>
  <div class="md-layout md-gutter login-box md-alignment-center-center">
    <div class="md-layout-item md-size-15" v-for="social in socials">
      <md-card>
        <md-card-content>
          <div class="top-icon md-primary" :style="{backgroundColor: social.color}">
            <a :href="social.redirect_url">
              <md-icon class="fa md-size-3x login-icon-radius" :class="social.icon"></md-icon>
            </a>
          </div>
          <md-content class="login-text">
            <md-button :href="social.redirect_url">使用 {{social.name}} 登录</md-button>
          </md-content>
        </md-card-content>
      </md-card>
    </div>
  </div>



  <!--div class="centered-container">
    <md-progress-spinner :md-diameter="100" :md-stroke="10" md-mode="indeterminate"></md-progress-spinner>
  </div-->
</template>

<script>
  import axios from 'axios'
export default {
  name: 'Login',
  data() {
    return {
      loading: false,
      login: {
        email: "",
        password: ""
      },
      code: '',
      state: '',
      socials: []
    };
  },
  created() {

    this.code = this.$route.query.code
    this.state = this.$route.query.state
    if (this.code) this.auth()
    else {
      this.get_socials()
    }
  },
  updated() {
    console.log(this.socials)
  },
  methods: {
    auth() {
      this.$http.post('/socials/' + this.$route.params.type + '/authorizations', {
        code: this.code,
        type: this.$route.params.type,
        state: this.state
      }).then( ({data}) => {
        this.$store.dispatch('login', data.access_token)
      })
    },
    get_socials() {
      this.$http.get('/socials').then( ({data}) => {
        if (data) {
          this.socials = data.data
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
  @import "~vue-material/dist/theme/engine";
  .centered-container {
    min-height: 100vh;
    min-width: 100vw;
  }
  .login-box {
    margin-top: 64px;
    height: 100vh;
    width:100vw;
    .top-icon {
      text-align: center;
      font-size: 5rem;
      width: 7rem;
      height: 7rem;
      margin: 1rem auto 0;
      border-radius: 100%;
      background-color: md-get-palette-color(blue, A200);
      position:relative;
      cursor: pointer;
      .login-icon-radius {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #ffffff;
        font-family: FontAwesome !important;
      }
    }
    .login-text {
      margin: 1rem auto 0;
      text-align: center;
    }
  }
</style>
